import React from 'react';
import { Radio, Table } from 'antd';
import styles from './style.less';

// 人员分布表格
const Distribution = ({ data = [], onChange, type }) => {
    if (data.length > 0 && !type) {
        onChange('1');
    }
    const columns = [
        {
            title: `${type === '1' ? '公司/部门' : '职位'}`,
            dataIndex: `${type === '1' ? 'departmentName' : 'postName'}`,
            key: `${type === '1' ? 'departmentName' : 'postName'}`,
            width: 160
        },
        {
            title: '占比',
            dataIndex: 'workNum',
            key: (text, record) => `${record.allNum}-${text}`,
            align: 'center',
            width: 100,
            render: (text, record) => (text ? `${((text / record.allNum) * 100).toFixed(2)}%` : '--')
        },
        {
            title: '人数',
            dataIndex: 'workNum',
            key: 'workNum'
        }
    ];
    return (
        <div className={styles.distributionWrap}>
            <div style={{ textAlign: 'right', marginBottom: 30 }}>
                <Radio.Group
                    onChange={e => {
                        onChange(e.target.value);
                    }}
                    defaultValue="1"
                    size="small"
                >
                    <Radio.Button value="1">公司/部门</Radio.Button>
                    <Radio.Button value="2">职位</Radio.Button>
                </Radio.Group>
            </div>
            <Table
                className={styles.distTable}
                size="small"
                bordered={false}
                rowKey="id"
                columns={columns}
                dataSource={data}
                pagination={false}
                scroll={data.length > 4 ? { y: 150 } : {}}
            />
        </div>
    );
};

export default Distribution;
